<!--
Copyright Yahoo Inc.
SPDX-License-Identifier: Apache-2.0
-->
<template>
  <v-btn
    class="skinny-search-row-btn color-picker-btn"
    :color="colorValue"
    :active="false"
    :ripple="false"
    selected-class=""
    data-testid="picker-btn">
    <v-icon
      v-if="displayPicker"
      icon="mdi-check-bold" />

    <v-menu
      activator="parent"
      v-model="displayPicker"
      :close-on-content-click="false">
      <chrome-picker
        :model-value="colorValue"
        @update:model-value="changeColor"
        class="color-picker"
        data-testid="picker" />
    </v-menu>
  </v-btn>
</template>

<script>
import { Chrome } from '@ckpack/vue-color';

let timeout;

export default {
  name: 'ColorPicker',
  components: {
    ChromePicker: Chrome
  },
  emits: ['color-selected'],
  props: {
    color: {
      type: String,
      default: '#00AAC5'
    },
    linkName: {
      type: String,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },
  watch: {
    color (newVal, oldVal) {
      this.setColor(this.color);
    }
  },
  data: function () {
    return {
      colorValue: '',
      displayPicker: false
    };
  },
  mounted: function () {
    this.setColor(this.color);
  },
  methods: {
    setColor: function (color) {
      this.colorValue = color;
      this.$emit('color-selected', { color, index: this.index });
    },
    changeColor: function (color) {
      if (timeout) { clearTimeout(timeout); }
      timeout = setTimeout(() => {
        timeout = null;
        this.setColor(color.hex);
      }, 1000);
    }
  },
  beforeUnmount: function () {
    if (timeout) { clearTimeout(timeout); }
  }
};
</script>

<style>
/* do not lighten button when active, so that we can see actual color */
.color-picker-btn .v-btn__overlay {
  opacity: 0 !important;
}
</style>
